<template>
  <div class="">
    <el-form :model="detailForm" class="el-form" v-loading="loading" label-width="130px">
      <el-card class="box-card" shadow="never">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="违章总次数:">
              {{ detailForm.violationTotalCount }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="已处理违章数:">
              {{ detailForm.handleViolationCount }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="未处理违章数:">
              {{ detailForm.violationTotalCount }}
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="罚款总金额:">
              {{ format_thousand(detailForm.penaltyTotalPrice) }}
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="违章总分数:">
              {{ detailForm.violationTotalScore }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col>
            <el-table border :data="illegalList" style="width: 100%">
              <el-table-column type="index" label="序号" align="center" width="50">
              </el-table-column>
              <el-table-column prop="name" align="center" label="操作">
                <template #default="{row}">
                  <e-button size="mini" @click="handleView(row)" type="text">查看
                  </e-button>
                </template>
              </el-table-column>
              <el-table-column prop="handleStatus" show-overflow-tooltip align="center" label="处理状态">
                <template v-slot="{row}">
                  <dict-tag :options="dict.type.illegal_process_status" :value="row.handleStatus"/>
                </template>
              </el-table-column>
              <el-table-column prop="collectUnit" show-overflow-tooltip align="center" label="采集单位">
                <template v-slot="{row}">
                  {{ row.collectUnit }}
                </template>
              </el-table-column>
              <el-table-column prop="violationTime" show-overflow-tooltip align="center" label="违章时间">
                <template v-slot="{row}">
                  {{ row.violationTime }}
                </template>
              </el-table-column>
              <el-table-column prop="violationEvent" show-overflow-tooltip align="center" label="违法行为">
                <template v-slot="{row}">
                  {{ row.violationEvent }}
                </template>
              </el-table-column>
              <el-table-column prop="penaltyPrice" show-overflow-tooltip align="center" label="罚款金额">
                <template v-slot="{row}">
                  {{ row.penaltyPrice }}
                </template>
              </el-table-column>
              <el-table-column prop="penaltyScore" show-overflow-tooltip align="center" label="罚款分数">
                <template v-slot="{row}">
                  {{ row.penaltyScore }}
                </template>
              </el-table-column>
              <el-table-column prop="violationAddress" show-overflow-tooltip align="center" label="违章地点">
                <template v-slot="{row}">
                  {{ row.violationAddress }}
                </template>
              </el-table-column>
              <el-table-column prop="deductionType" show-overflow-tooltip align="center" label="扣款类别">
                <template v-slot="{row}">
                  <dict-tag :options="dict.type.deduction_type" :value="row.deductionType"/>
                </template>
              </el-table-column>
              <el-table-column prop="violationRemark" show-overflow-tooltip align="center" label="违章记录备注">
                <template v-slot="{row}">
                  {{ row.violationRemark }}
                </template>
              </el-table-column>
              <el-table-column prop="handleTime" show-overflow-tooltip align="center" label="记录时间">
                <template v-slot="{row}">
                  {{ row.handleTime }}
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

      </el-card>
    </el-form>
  </div>
</template>

<script>
import {
  queryCarViolationInfoStatistics,
  queryCarViolationRecord,
} from "@/api/illegalManage/illegalList";
import * as tty from "tty";

export default {
  name: "index",
  dicts: ["contract_type", "deduction_type", "illegal_process_status"],
  props: ['carId','carNo'],
  computed: {},
  watch: {},
  data() {
    return {
      detailForm: {},
      illegalList: [],
      loading: false
    };
  },
  created() {
    this.handleList();
  },
  mounted() {
  },
  methods: {
    async handleList() {
      this.loading = true;
      try {
        const res = await queryCarViolationRecord(this.carNo)
        this.illegalList = res.data;
        const ress = await queryCarViolationInfoStatistics(this.carId)
        this.detailForm = ress.data;
      } finally {
        this.loading = false;
      }

    },

    handleView(row){
      this.$router.push({
        name: 'IllegalListDetail',
        query: {carViolationId: row.carViolationId,carNo:this.carNo}
      })
    }
  },
};
</script>

<style scoped lang="scss">
.el-form {
  .box-card {
    font-size: 14px;
    margin-bottom: 20px;
  }
}
</style>


